<template>
   <div class="screen" ref="screen">
      <RouterView></RouterView>
   </div>
</template>

<script setup>

import { ref, onMounted } from "vue";
//获取数据大屏展示内容盒子的DOM元素
let screen = ref();
onMounted(() => {
   screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
});
//定义大屏缩放比例
function getScale(w = 4600, h = 1344) {
   const ww = window.innerWidth / w;
   const wh = window.innerHeight / h;
   return ww < wh ? ww : wh;
}
//监听视口变化
window.onresize = () => {
   screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
}
</script>

<style scoped>
.screen {
   position: fixed;
   width: 4600px;
   height: 1344px;
   left: 50%;
   top: 50%;
   transform-origin: left top;
}
</style>
